import React from 'react'
import { connect } from 'dva'
import { Card, Table, Spin } from 'antd'
import moment from 'moment'

/**
 * ManagerStyleBoxList 
 */
import TheTable from '../../../components/TheTable'
class ManagerStyleBoxList extends React.Component {
    state = {
        data: this.props.managerStyleBoxList,
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId)) {
            this.fetchData(nextProps)
        }
        if (nextProps.managerStyleBoxList !== this.props.managerStyleBoxList) {
            this.setState({
                data: nextProps.managerStyleBoxList,
            })
        }
    }
    fetchData = (props) => {
        this.setState({
            data: {}
        })
        props.dispatch({
            type: 'combinatorialAnalysis/getManagerStyleBoxList',
            payload: props
        })
    }
    render() {

        const {field,list}=this.state.data
        
        const theFieldArr = ['组合持仓股票市值加权（亿）', '年化换手率', 'P/E(TTM)', 'PB', 'ROE']
        // 表头设置
        const columns = []
        if(field){
            theFieldArr.map(item=>{
                const theField=field.find(it=>it.name===item)
                // if((theField.name==='年化换手率')||(theField.name==='ROE')){
                //     columns.push({
                //         title: theField.name,
                //         dataIndex: theField.id,
                //         key: theField.id,
                //         render: (text, record) => text&&text.toPercent()
                //     })
                // }
                if((theField.name==='ROE')){
                    columns.push({
                        title: theField.name,
                        dataIndex: theField.id,
                        key: theField.id,
                        render: (text, record) => text&&text.toPercent()
                    })
                }
                else if((theField.name==='年化换手率')){
                    columns.push({
                        title: theField.name,
                        dataIndex: theField.id,
                        key: theField.id,
                        render: (text, record) => text&&Math.round(text*100)/100
                    })
                }
                else{
                    columns.push({
                        title: theField.name,
                        dataIndex: theField.id,
                        key: theField.id,
                        render: (text, record) => text||(text===0?0:'-')
                    })
                }
            })
        }
        
        return (
            <Card className="tableCard managerStyleBoxList">
                {
                    Object.keys(this.state.data).length ? <TheTable columns={columns} dataSource={list} rowKey='marketValueWeighted' pagination={list.length > 10 ? { size: "small" } : false} /> : <Spin />
                }
            </Card>
        )

    }
}

ManagerStyleBoxList.defaultProps = {
    lPortId: null,
    managerStyleBoxList: {
        "field": [
            {
                "name": "组合持仓股票市值加权（亿）",
                "id": "marketValueWeighted"
            },
            {
                "name": "年化换手率",
                "id": "annualTurnoverRate"
            },
            {
                "name": "P/E(TTM)",
                "id": "pe"
            },
            {
                "name": "PB",
                "id": "pb"
            },
            {
                "name": "ROE",
                "id": "roe"
            }
        ],
        "list": [
            {
                "marketValueWeighted": 2.55,
                "annualTurnoverRate": 0.3,
                "pe": 25.5,
                "pb": 8.6,
                "roe": 0.105
            }
        ]
    }
}

export default connect()(ManagerStyleBoxList)
